<template>
	<view>
		<!-- 汽车票选择用户组件 -->
		<view class="userTop">
			<span style="float: right;" @click="determine(true)">确定</span>
			<span @click="determine(false)">取消</span>
		</view>
		<view style="height: 600upx;width: 100%;overflow: auto;">
			<view class="addUser" @click="addUser">新增乘车人</view>
			<checkbox-group class="userCheck" @change="checkboxChange">
				<label class="userLabelBody" v-for="item in userList" :key="index">
					<view class="userLabel">
						<checkbox :value="item.id" :checked="item.checked" :data-data="item" />
						<view class="itemUser">
							<view class="userName">{{ item.name }}</view>
							<view class="userName">{{ item.cardId }}</view>
						</view>
						<view class="imgBody">
							<view class="modifyView"><image @click="userInfo" :data-userinfo="item" src="../../../static/img/modify.png" mode=""></image></view>
							<view class="modifyView"><image @click="deleUser" :data-userid="item.id" src="../../../static/img/del.png" mode=""></image></view>
						</view>
					</view>
				</label>
			</checkbox-group>
		</view>
	</view>
</template>
<script>
import value from '../../../static/value/value.js';
import utils from '@/static/common/utils.js';
export default {
	props: ['userList'],
	data() {
		return {
			// title: 'checkbox 复选框',
			selectUsers: []
		};
	},
	mounted() {},
	methods: {
		userInfo(e) {
			value.value.alertUserInfo = e.currentTarget.dataset.userinfo;
			uni.navigateTo({
				url: '/pages/addUser/addUser?userinfo=true'
			});
		},
		deleUser(e) {
			const that = this;
			const userid = e.currentTarget.dataset.userid;
			uni.showModal({
				title: '提示',
				content: '确定删除该联系人吗？',
				success(res) {
					if (res.confirm) {
						let obj = {
							takemanId: e.currentTarget.dataset.userid,
							ticks: utils.utils.GetTicks(),
							channel: 'Xcx'
						};
						obj.sign = utils.utils.GetSign(obj);
						that.$http
							.request({
								url: `/Member/DeleteTakeMan`,
								method: 'post',
								data: obj
							})
							.then(res => {
								that.$emit('seltUser', true);
							})
							.catch(err => {
								console.log(err);
							});
					}
				}
			});
		},
		addUser() {
			uni.navigateTo({
				url: '/pages/addUser/addUser'
			});
		},
		determine(e) {
			this.$emit('declick', e ? this.selectUsers : false);
		},
		checkboxChange: function(e) {
			var items = this.userList,
				values = e.detail.value;
			for (var i = 0, lenI = items.length; i < lenI; ++i) {
				const item = items[i];
				if (values.includes(item.value)) {
					this.$set(item, 'checked', true);
				} else {
					this.$set(item, 'checked', false);
				}
			}
			// 选择的用户ID
			this.selectUsers = values;
		}
	}
};
</script>

<style scoped>
.userCheck {
	width: 95%;
	margin: 0 auto;
}
/* .userLabelBody{
	padding-left: 30upx;
} */
.modifyView {
	display: inline-block;
	width: 50upx;
	height: 50upx;
	margin-left: 20upx;
}
.imgBody {
	position: absolute;
	top: 14upx;
	right: 40upx;
}
.modifyView > image {
	width: 100%;
	height: 100%;
}
.userName {
	height: 50upx;
	line-height: 50upx;
}
.itemUser {
	height: 120upx;
	line-height: 120upx;
	position: absolute;
	top: 20upx;
	left: 15%;
}
.userTop {
	line-height: 100upx;
	width: 95%;
	margin: 0 auto;
}
.addUser {
	width: 95%;
	height: 90upx;
	line-height: 90upx;
	margin: 0 auto;
	font-size: 34upx;
	color: #00a0e9;
	text-align: center;
	background-color: #ffffff;
	border-radius: 10upx;
	margin-bottom: 30rpx;
}
.userLabel {
	background-color: #ffffff;
	height: 140upx;
	line-height: 140upx;
	position: relative;
	border-radius: 10rpx;
	padding-left: 30rpx;
}
</style>
